<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Type" content="text/html">
		<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
		<meta name="format-detection" content="telephone=no">
		<meta name="format-detection" content="email=no">
		<title>我的订单</title>
		<script type="text/javascript" src="../assets/jquery-3.2.1.js"></script>
		<link rel="stylesheet" href="../assets/font-awesome-4.7.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/dingdan.css" />
		<script src="../assets/flexible/flexible_css.debug.js"></script>
		<script src="../assets/flexible/flexible.debug.js"></script>
		<link rel="stylesheet" href="../css/swiper-3.4.2.min.css" />
		<link rel="stylesheet" href="../assets/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" href="../css/order.css">
		<style>
			i {
				color: black;
			}
			
			#contrast .add {
				backgr;
				ound: red;
			}
		</style>
	</head>

	<body>
		<header class="head">
			<img src="../images/zuosanjiao.png" />
			<span class="queren">我的订单</span>
		</header>
		<main>
			<section class="contrast">
				<div id="contrast">
					<a class="default add" href="#" id="btn1">全部</a>
					<a href="#" id="btn2">待付款</a>
					<a href="#" id="btn3">待发货</a>
					<a href="#" id="btn4">待收货</a>
					<a href="#" id="btn5">待评价</a>

				</div>
				<div class="swiper-container arr" id="swiper-container1" style="height:300px;">
					<div class="swiper-wrapper">
						<div class="swiper-slide blue-slide box">
							<dl class="nav">
								<dt class="imga"><img src="../images/dandao.png"</dt>
								<dt class="imgb"><a>艾尔拉拉女装特卖店</a><img src="../images/youjiantou.png"</dd>
								<dd class="sheng">待付款 (29分16秒)</dd>
							</dl>
							<dl class="shirt">
								<dt><img src="../images/zhongchangqun.png"/></dt>
								<dd class="shu">
									<p>中长款背带裙两件套<span>￥29.90</span></p>
									<h3>颜色：黑色 尺码:XL<span>X1</span></h3>
								</dd>
							</dl>
							<section class="mony">共1件 应付:￥29.90</section>
						  <button class="btn">付款</button>
						</div>
						<div class="swiper-slide red-slide box">
							<dl class="nav">
								<dt class="imga"><img src="../images/dandao.png"</dt>
								<dt class="imgb"><a>艾尔拉拉女装特卖店</a><img src="../images/youjiantou.png"</dd>
								<dd class="sheng">待付款 (29分16秒)</dd>
							</dl>
							<dl class="shirt">
								<dt><img src="../images/zhongchangqun.png"/></dt>
								<dd class="shu">
									<p>中长款背带裙两件套<span>￥29.90</span></p>
									<h3>颜色：黑色 尺码:XL<span>X1</span></h3>
								</dd>
							</dl>
							<section class="mony">共1件 应付:￥29.90</section>
						  <button class="btn">付款</button>
						</div>
						<div class="swiper-slide orange-slide box">
							<dl class="nav">
								<dt class="imga"><img src="../images/dandao.png"</dt>
								<dt class="imgb"><a>艾尔拉拉女装特卖店</a><img src="../images/youjiantou.png"</dd>
								<dd class="sheng">待付款 (29分16秒)</dd>
							</dl>
							<dl class="shirt">
								<dt><img src="../images/zhongchangqun.png"/></dt>
								<dd class="shu">
									<p>中长款背带裙两件套<span>￥29.90</span></p>
									<h3>颜色：黑色 尺码:XL<span>X1</span></h3>
								</dd>
							</dl>
							<section class="mony">共1件 应付:￥29.90</section>
						  <button class="btn">付款</button>
						</div>
						<div class="swiper-slide green-slide box">
							<dl class="nav">
								<dt class="imga"><img src="../images/dandao.png"</dt>
								<dt class="imgb"><a>艾尔拉拉女装特卖店</a><img src="../images/youjiantou.png"</dd>
								<dd class="sheng">待付款 (29分16秒)</dd>
							</dl>
							<dl class="shirt">
								<dt><img src="../images/zhongchangqun.png"/></dt>
								<dd class="shu">
									<p>中长款背带裙两件套<span>￥29.90</span></p>
									<h3>颜色：黑色 尺码:XL<span>X1</span></h3>
								</dd>
							</dl>
							<section class="mony">共1件 应付:￥29.90</section>
						  <button class="btn">付款</button>
						</div>
						<div class="swiper-slide pink-slide box">
							<dl class="nav">
								<dt class="imga"><img src="../images/dandao.png"</dt>
								<dt class="imgb"><a>艾尔拉拉女装特卖店</a><img src="../images/youjiantou.png"</dd>
								<dd class="sheng">待付款 (29分16秒)</dd>
							</dl>
							<dl class="shirt">
								<dt><img src="../images/zhongchangqun.png"/></dt>
								<dd class="shu">
									<p>中长款背带裙两件套<span>￥29.90</span></p>
									<h3>颜色：黑色 尺码:XL<span>X1</span></h3>
								</dd>
							</dl>
							<section class="mony">共1件 应付:￥29.90</section>
						  <button class="btn">付款</button>
						</div>
					</div>
				</div>
			</section>

		</main>
		<script src="../js/jquery-1.12.4.min.js"></script>
		<script src="../js/swiper-3.4.2.jquery.min.js"></script>
		<script src=" ../js/artTemplate.js"></script>

		<script>
			var mySwiper = new Swiper('.arr', {
				//			loop:true,
				//			direction:"horizontal",
				//			autoplay:2000,
				onSlideChangeEnd: function(swiper) {
					$("#contrast a").eq(swiper.activeIndex).addClass('add').siblings().removeClass("add")
				}
			})
			$('#btn1').click(function() {
				$(this).addClass("add").siblings().removeClass("add")
				mySwiper.slideTo(0, 1000, false);
			})
			$('#btn2').click(function() {
				$(this).addClass("add").siblings().removeClass("add")
				mySwiper.slideTo(1, 1000, false);
			})
			$('#btn3').click(function() {
				$(this).addClass("add").siblings().removeClass("add")
				mySwiper.slideTo(2, 1000, false);
			})
			$('#btn4').click(function() {
				$(this).addClass("add").siblings().removeClass("add")
				mySwiper.slideTo(3, 1000, false);
			})
			$('#btn5').click(function() {
				$(this).addClass("add").siblings().removeClass("add")
				mySwiper.slideTo(4, 1000, false);
			})
		</script>
	</body>

</html>